<template>
    <div>
        <!-- 上方导航栏 -->
        <nav class="navbar  navbar-default navbar-fixed-top header">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/">
                        <span>诚学信付</span>
                    </a>
                </div>
            </div>
        </nav>

        <div id="sign-modal" tabindex="-1" role="dialog">
            <!-- <div class="modal fade" id="sign-modal"  tabindex="-1" role="dialog"> -->
            <div class="modal-dialog modal-sm" role="document">
                <div class="modal-content">

                    <div class="modal-body">
                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active">
                                <a href="#signin-form" aria-controls="signin-form" role="tab"
                                    data-toggle="tab">手机验证码登录</a>
                            </li>
                        </ul>

                        <div class="tab-content">
                            <!-- 登录 -->
                            <div role="tabpanel" class="tab-pane active" id="signin-form">
                                <form action="/login" method="post">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <div class="input-group-addon">
                                                <i class="fa fa-user" style="margin:0;"></i>
                                            </div>

                                            <input type="phone" name="login" class="form-control" placeholder="请输入手机号"
                                                v-model="phone"
                                                v-validate="{required:true,regex:  /^(((13[0-9]{1})|(14[0-9]{1})|(17[0]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-9]{1}))+\d{8})$/ }"
                                                :class="{ invalid: errors.has('phone') }">
                                            <span class="error">{{errors.first("phone")}}</span>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="input-group">
                                            <div class="input-group-addon">
                                                <i class="fa fa-shield" style="margin:0;"></i>
                                            </div>

                                            <input type="text" name="code" class="form-control" v-model="inputCode">
                                            <span class="error">{{errors.first("code")}}</span>


                                            <input :value="codeText" type="button" class="getCode"
                                                @click.stop="toGetCode" ref="eleCode" />
                                        </div>
                                    </div>


                                    <div class="form-group">
                                        <input class="btn btn-primary" value="登 录"
                                            @click="userLogin">
                                    </div>

                                    <div class="form-group">
                                        <button @click="back" class="btnBack">返回</button>
                                    </div>

                                    <div class="form-group error-msg">
                                        <div class="alert alert-danger" role="alert"></div>
                                    </div>

                                </form>
                            </div>


                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name: 'LoginType2Index',
    data() {
        return {
            phone: '',
            code: '', //验证码有接口
            password: '',
            loginType: 2,
            inputCode: '',
            codeText: '获取验证码',
            timer: 60,//倒计时时间设置成60秒
        }
    },

    methods: {

        // 用户登录
        async userLogin() {
            try {
                let result = await this.$API.reqLogin({
                    phone: this.phone,
                    type: this.loginType,
                    validaCode: this.inputCode
                });
                if (result.code == 0 && result.msg == "success") {
                    alert('登录成功！')
                    this.$router.push('home');
                    localStorage.setItem('user',this.phone)
                    // this.$store.commit('user/GETUSER',this.phone);
                } else {
                    if(result.data){
                        alert("登录失败！" + result.data.phone);
                    }else{
                        alert("登录失败！" + result.msg);
                    }
                }
            } catch (error) {
                alert(error.message);
            }
        },

        //验证码倒计时
        codeTimer() {
            let _this = this;//setTimeout里面的this不一样,所以在这里先保存好
            if (this.timer >= 1) {
                this.$refs.eleCode.setAttribute("disabled", "true");
                this.$refs.eleCode.setAttribute("value", this.timer + "s 后获取");
                this.timer--;
                setTimeout(function () {
                    _this.codeTimer();
                }, 1000);
            } else {
                this.$refs.eleCode.setAttribute("value", this.codeText);
                this.$refs.eleCode.removeAttribute("disabled");
                this.timer = 60;
            }
        },
        //获取验证码
        toGetCode() {
            //格式正确调用接口发送验证码
            if ((/^(((13[0-9]{1})|(14[0-9]{1})|(17[0]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-9]{1}))+\d{8})$/).test(this.phone)) {
                this.codeTimer();
                this.isTrue = true;
                this.reqCode();
            }else {
                alert('请注意手机格式且手机号必须填写！')
            }
        },
        // 获取验证码
        async reqCode() {
            let data = {
                phone: this.phone,
                type: this.loginType
            }
            try {
                let result = await this.$API.reqVCode(data);

                if (result.code !== 0 && result.msg !== "success") {
                    alert("手机短信发送失败！" + result.data.phone);
                }
            } catch (error) {
                alert(error.message);
            }
        },

        back(){
            this.$router.push('login');
        }


    },



}
</script>

<style scoped>
.getCode {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 999;
    background-color: #ffffff;
    color: #41bcff;

}

.error {
    color: red;
}

/* modal 模态框*/
#invite-user .modal-body {
    overflow: hidden;
}

#invite-user .modal-body .form-label {
    margin-bottom: 16px;
    font-size: 14px;
}

#invite-user .modal-body .form-invite {
    width: 80%;
    padding: 6px 12px;
    background-color: #eeeeee;
    border: 1px solid #cccccc;
    border-radius: 5px;
    float: left;
    margin-right: 10px;
}

#invite-user .modal-body .msg-modal-style {
    background-color: #7dd383;
    margin-top: 10px;
    padding: 6px 0;
    text-align: center;
    width: 100%;
}

#invite-user .modal-body .modal-flash {
    position: absolute;
    top: 53px;
    right: 74px;
    z-index: 999;
}

/* end modal */



.navbar-banner {
    margin-top: 50px;
    /* background: url("img/homepage-bg.png"); */
    background-size: cover;
    background-repeat: no-repeat;
}

.navbar-brand {
    position: absolute;
    left: 50%;
    line-height: 50px;
}

.form-group .btn {
    margin: 20px 0;

}
.btnBack{
    background-color:#ffffff;
    color: #41bcff;
}

.btn-primary {
    border-radius: 20px;
    background-color: #2e7ba7;
    background: linear-gradient(to right, white, #2e7ba7);
    border: none;
}
</style>
